<template>
	<view>
		<view class="qingding m-q3">
			<text class="qd_tt">{{termName}}</text>
			<text class="qd_xm">姓名：{{reportDetail.name}}</text>
			<view style="float: left;margin: 72upx 0 0 112upx;">
				<view class="style1">当前活跃分：{{reportDetail.score}}分</view>
				<view class="style1">完成任务：{{reportDetail.endTaskedCount}}个</view>
				<view class="style1">提交报告：{{reportDetail.reportCount}}个</view>
				<view class="style1">观看影片数：{{reportDetail.movieCount}}篇</view>
				<view class="style1">VR体验：{{reportDetail.vrCount}}次</view>
				<view class="style1">实践成绩：{{reportDetail.avgScore}}分</view>
			</view>
			<view style="float: left;margin: 72upx 0 0 84upx;">
				<view class="style1">接收任务：{{reportDetail.reciveTaskedCount}}个</view>
				<view class="style1">参观景区：{{reportDetail.voviCount}}个</view>
				<view class="style1">研读的资源：{{reportDetail.readCount}}个</view>
				<view class="style1">谈访记录：{{reportDetail.activiOnlineCount}}个</view>
				<view class="style1">老师评阅：{{reportDetail.scoredCount}}次</view>
			</view>
			<view style="background-color: #955209;width: 505upx;height: 1px;margin: 50upx 0 0 88upx;float: left;"></view>
			<view style="float: left;margin: 100upx 88upx 0 88upx;width: 504upx;">
				<view style="color: #BB3832;font-size: 24upx;font-weight: bold;width: 200upx;float: left;">能力评定：90分</view>
				<view class="xx" v-for="(item,index) in starNum" style="float: right;">
					<image src="../../static/one_icon.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				starNum: 5, //综合评定星星数量
				termName:'',//报告名称
				reportDetail:'',//报告详情
			}
		},
		onShow() {

		},
		onLoad(option) {
			this.termName = option.termName;
		},
		created() {
			let that = this
			that.getStuTermReport();
		},
		methods: {
			  //获取学期报告详情
			  getStuTermReport(){
				let that = this;
				that.pyReq(that.$http.getStuTermReport,{termName:that.termName},function(res){
				  that.reportDetail = res.result;
				  let sumScore = that.reportDetail.avgScore;
				  if (sumScore > 0)
				  	that.starNum = 1;
				  if (sumScore > 20)
				  	that.starNum = 2;
				  if (sumScore > 40)
				  	that.starNum = 3;
				  if (sumScore > 60)
				  	that.starNum = 4;
				  if (sumScore > 80)
				  	that.starNum = 5;
				});
			  },
		}
	}
</script>

<style>
	.style1{
		color: #333;
		font-size: 24upx;
		font-weight: bold;
		margin-bottom: 47upx;
		line-height: 1;
	}
	.xx {
		text-align: left;
	}

	.xx image {
		width: 28upx;
		margin-right: 10upx;
	}

	.qys {
		width: 500upx;
		margin: 0 auto;
		margin-top: 40upx;
	}

	.pingfenxx {
		margin-top: 20upx;
		/* justify-content: space-between; */
		font-weight: 700;
	}

	.qys text {
		font-size: 24upx;
		color: #BB3832;
		display: block;
		line-height: 40upx;
	}

	.qys .wcl-3 {
		/* font-size: 30upx; */
		font-weight: 700;
	}

	.qd_xqlis {
		width: 240upx;
		margin-top: 15upx;
	}

	.qd_xqlis text {
		font-size: 24upx;
		color: #000000;
	}

	.qd_xq {
		width: 500upx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 12upx;
		border-bottom: 1upx solid #955209;
		padding-bottom: 20upx;
	}

	.qd_xq text {
		font-size: 24upx;
		color: #BB3832;
	}

	.qd_xqs {
		width: 500upx;
		margin: 0 auto;
		margin-top: 40upx;
		border-bottom: 1upx solid #955209;
		padding-bottom: 20upx;
		font-size: 24upx;
	}

	.qd_xqs text {
		font-weight: 700;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.qingding {
		width: 680upx;
		height: 1083upx;
		background-image: url(/static/baogao.png);
		background-position: center;
		background-size: 100% 100%;
	}

	.qd_tt {
		display: block;
		text-align: center;
		font-size: 42upx;
		color: #B31610;
		padding-top: 127upx;
		font-weight: 700;
	}

	.qd_xm {
		display: block;
		text-align: center;
		border: 1upx solid #9D601C;
		color: #9D601C;
		width: 250upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 30upx;
		margin: 0 auto;
		border-radius: 30upx;
		margin-top: 30upx;
	}
</style>
